<%--
  Created by IntelliJ IDEA.
  User: 86176
  Date: 2022/4/14
  Time: 8:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>注册页面</title>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/static/login/css/register.css">

</head>
<body>
<%--导入js--%>
<script src="${pageContext.request.contextPath}/static/js/axios-0.18.0.js"></script>
<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有账号?</span><a href="${pageContext.request.contextPath}/jsp/login.jsp">登录</a>
    </div>
    <div style="color:#ff0000;display:none" id="register_err">&nbsp;&nbsp;&nbsp;&nbsp;账号已经存在</div>
    <div style="color:#ff0000;display:none" id="register_msg">&nbsp;&nbsp;&nbsp;&nbsp;${register_msg}</div>

    <form name="reg_from" action="${pageContext.request.contextPath}/register/registerUser" method="post">

        <table>
            <tr>
                <td>用户名:</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>
            </tr>
            <tr>
                <td>密码:</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>
            <tr>
                <td>姓名:</td>
                <td class="inputs">
                    <input name="name" type="text" id="name">
                </td>
            </tr>
            <tr>
                <td>部门</td>
                <td>
                    <select name="dept">
                        <!--下拉列表框-->
                        <option value="1">研发部</option>
                        <option value="2" selected="selected">销售部</option>
                        <option value="3">办公室</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>验证码:</td>
                <td class="inputs">
                    <input name="checkCode" type="text" id="checkCode">
                    <img id="checkCodeImg" src="${pageContext.request.contextPath}/register/checkCodeServlet">
                    <a href="" id="changeImg">看不清？</a>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td>
                    <div class="buttons">
                        <input value="注 册" type="submit" id="reg_btn">
                    </div>
                </td>
                <td>
                    <div class="buttons">
                        <input value="取 消" type="reset" id="set_btn">
                    </div>
                </td>
            </tr>
        </table>

        <br class="clear">
    </form>
</div>
<script>
    document.getElementById("changeImg").onclick = function () {
        //路径后面添加时间戳的目的是避免浏览器进行缓存静态资源
        document.getElementById("checkCodeImg").src = "${pageContext.request.contextPath}/checkCodeServlet?" + new Date().getMilliseconds();
    }
</script>
<script>
    {
        //验证用户名是否符合规定
        var username = document.getElementById("username");
        //绑定onblur事件 失去焦点
        username.onblur = checkUsername;

        function checkUsername() {
            //获取输入用户名
            var name = username.value.trim();
            //1.4 判断用户名是否符合规则：长度 6~12,单词字符组成
            var reg = /^\w{3,12}$/;
            var flag = reg.test(name);

            if (flag) {
                //符合规则
                document.getElementById("username_err").style.display = 'none';
            } else {
                //不合符规则
                document.getElementById("username_err").style.display = '';
            }
            return flag;
        }
    }
    {
        //验证用户名是否符合规定
        var passwordInput = document.getElementById("password");
        //绑定onblur事件 失去焦点
        passwordInput.onblur = checkPassword;

        function checkPassword() {
            //获取输入用户名
            var password = passwordInput.value.trim();
            //1.4 判断用户名是否符合规则：长度 6~12,单词字符组成
            var reg = /^\w{3,12}$/;
            var flag = reg.test(password);

            if (flag) {
                //符合规则
                document.getElementById("password_err").style.display = 'none';
            } else {
                //不合符规则
                document.getElementById("password_err").style.display = '';
            }
            return flag;
        }
    }
    {
        //1. 获取表单对象
        var regForm = document.getElementsByName("reg_from");
        regForm.onsubmit = function () {
            //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false
            var flag = checkUsername() && checkPassword();
            return flag;
        }
    }
</script>
<script>
    //axious请求
    //1. 给用户名输入框绑定 失去焦点事件
    document.getElementById("username").onblur = function () {
        var username = this.value;
        axios({
            method: "POST",
            url: "${pageContext.request.contextPath}/register/checkUsernameServlet",
            data: "username=" + username
        }).then(function (resp) {
            if (resp.data == true) {
                document.getElementById("register_err").style.display = "";
            } else {
                document.getElementById("register_err").style.display = "none";

            }
        })
    }
</script>
</body>
</html>
